import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_topia/common_provider/user_provider.dart';
import 'package:card_topia/common_widget/my_app_bar.dart';
import 'package:card_topia/common_widget/my_scaffold.dart';
import 'package:card_topia/common_widget/profile_lable.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:card_topia/my_router.dart';
import 'package:card_topia/pages/profile_page/my_cards_page/my_cards_page.dart';
import 'package:card_topia/pages/profile_page/widgets/custom_container.dart';
import 'package:card_topia/pages/profile_page/widgets/feature_item.dart';
import 'package:card_topia/pages/profile_page/widgets/profile_data_item.dart';
import 'package:card_topia/pages/setting_page/setting_page.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

import '../../common_widget/my_refresh_header.dart';

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    //图片预加载
    precacheImage(const AssetImage("assets/profile_money_bg.png"),context);
    return Consumer(builder: (context, ref, child) {
      final userPod = ref.watch(userInfoProvider);
      final RefreshController controller = RefreshController();
      return Scaffold(
        appBar: CustomAppBar(
          actions: [
            InkWell(
              onTap: ()=>MyRouter.push(page: SettingPage()),
              child: Container(
                padding: EdgeInsets.all(16.w),
                child: const Icon(IconsaxOutline.setting),
              ),
            )
          ],
        ),
        body: SmartRefresher(
          controller: controller,
          onRefresh: ()async{
            await ref.read(userInfoProvider).getUserInfo();
            controller.refreshCompleted();
          },
          enablePullUp: false,
          header: CustomHeader(builder: (context,status)=>RefreshHeader(status: status),),
          child: SingleChildScrollView(
            physics: const BouncingScrollPhysics(),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 16.w),
                  child: Row(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.white,width: 2.w),
                          borderRadius: BorderRadius.circular(100),
                          boxShadow: [
                            BoxShadow(offset: const Offset(1, 1),color: Colors.black.withOpacity(0.12),blurRadius: 4.w,spreadRadius: 2.w)
                          ]
                        ),
                        child: userPod.userInfo?.profileUrl==null?Container():ClipRRect(
                          borderRadius: BorderRadius.circular(50),
                          child: CachedNetworkImage(
                            imageUrl: "${userPod.userInfo?.profileUrl}",
                            width: 56.w,
                            height: 56.w,
                            fit: BoxFit.cover,
                            fadeInDuration: Duration.zero,
                            placeholder: (context, _) => const Icon(
                              Icons.person_2_rounded,
                              color: descColor,
                            ),
                            errorWidget: (context, err, _) => const Icon(
                              Icons.person_2_rounded,
                              color: descColor,
                            ),
                          ),
                        ),
                      ),
                      SizedBox(
                        width: 16.w,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "${userPod.userInfo?.displayName}",
                            style:
                                TextStyle(fontSize: 16.sp, fontFamily: harmony),
                          ),
                          SizedBox(
                            height: 8.w,
                          ),
                          Row(
                            children: [
                              ProfileLabel(
                                  title: 'Lv.', content: "${userPod.userInfo?.level}"),
                              SizedBox(
                                width: 4.w,
                              ),
                              ProfileLabel(
                                title: "信誉值:",
                                content: "${userPod.userInfo?.credibility}%",
                                backgroundColor: greenColor,
                              ),
                            ],
                          )
                        ],
                      ),
                      const Spacer(),
                      InkWell(
                        onTap: () {},
                        child: Row(
                          children: [
                            Text(
                              "个人主页",
                              style: TextStyle(fontSize: 12.sp, color: descColor),
                            ),
                            const Icon(
                              Icons.chevron_right,
                              color: descColor,
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 16.w,
                ),
                //粉丝
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                        child: ProfileDataItem(
                            label: "关注", content: "${userPod.userInfo?.follow}")),
                    Expanded(
                        child: ProfileDataItem(
                            label: "粉丝", content: "${userPod.userInfo?.fans}")),
                    Expanded(
                        child: ProfileDataItem(
                            label: "帖子", content: "${userPod.userInfo?.postQty}")),
                    Expanded(
                        child: ProfileDataItem(
                            label: "收藏", content: "${userPod.userInfo?.collection}")),
                  ],
                ),
                SizedBox(
                  height: 16.w,
                ),
                //资产
                Container(
                    width: double.infinity,
                    margin: EdgeInsets.symmetric(horizontal: 16.w),
                    padding: EdgeInsets.all(12.w),
                    decoration: BoxDecoration(
                        image: const DecorationImage(
                            image: AssetImage("assets/profile_money_bg.png"),
                            fit: BoxFit.cover),
                        borderRadius: BorderRadius.circular(4)),
                    child: Column(
                      children: [
                        Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              "我的资产",
                              style: TextStyle(
                                  fontSize: 14.sp,
                                  color: Colors.white,
                                  fontFamily: harmony,
                                  fontWeight: FontWeight.bold),
                            )),
                        SizedBox(
                          height: 12.w,
                        ),
                        Row(
                          children: [
                            AssetsItem(title: "积分", content: "${userPod.userInfo?.bonusPoints}",onTap: (){

                            },),
                            AssetsItem(title: "我的卡片", content: "${userPod.userInfo?.cardQty}",onTap: (){
                              // context.push(MyRouter.myCardsPage);
                              MyRouter.push(page: MyCardsPage());
                            },),
                            AssetsItem(title: "优惠券", content: "${userPod.userInfo?.coupons}",onTap: (){

                            },),
                          ],
                        )
                      ],
                    )),
                //交易记录
                SizedBox(
                  height: 16.w,
                ),
                CustomContainer(
                    title: "我的交易",
                    child: Row(
                  children: [
                    Expanded(
                        child: FeatureItem(
                          label: "我买到的",
                          icon: const Icon(IconsaxOutline.money_recive),
                          onTap: () {},
                        )),
                    Expanded(
                        child: FeatureItem(
                          label: "我卖出的",
                          icon: const Icon(IconsaxOutline.money_send),
                          onTap: () {},
                        )),
                    Expanded(
                        child: FeatureItem(
                          label: "我抽到的",
                          icon: const Icon(IconsaxOutline.shopping_bag),
                          onTap: () {},
                        )),
                    Expanded(
                        child: FeatureItem(
                          label: "我的转赠",
                          icon: const Icon(IconsaxOutline.export_2),
                          onTap: () {},
                        )),
                  ],
                )),
                //其他功能
                SizedBox(height: 16.w,),
                CustomContainer(
                    title: "常用功能",
                    child: Column(
                  children: [
                    Row(
                      children: [
                        const Expanded(child: FeatureItem(label: "我的圈子", icon: Icon(IconsaxOutline.happyemoji))),
                        Expanded(
                            child: FeatureItem(
                              label: "卡片修复",
                              icon: const Icon(IconsaxOutline.card_coin),
                              onTap: () {},
                            )),
                        Expanded(
                            child: FeatureItem(
                              label: "卡片挂失",
                              icon: const Icon(IconsaxOutline.card_remove),
                              onTap: () {},
                            )),
                        Expanded(
                            child: FeatureItem(
                              label: "卡片补办",
                              icon: const Icon(IconsaxOutline.recovery_convert),
                              onTap: () {},
                            )),
                      ],
                    ),
                    SizedBox(height: 24.w,),
                    Row(
                      children: [
                        const Expanded(child: FeatureItem(label: "地址管理", icon: Icon(IconsaxOutline.buildings))),
                        Expanded(
                            child: FeatureItem(
                              label: "合作申请",
                              icon: const Icon(IconsaxOutline.people),
                              onTap: () {},
                            )),
                        Expanded(
                            child: Container()),
                        Expanded(
                            child: Container()),
                      ],
                    ),
                  ],
                ))
              ],
            ),
          ),
        ),
      ).withOnTap(context);
    });
  }
}

///资产Item
class AssetsItem extends StatelessWidget {
  const AssetsItem({super.key, required this.title, required this.content, required this.onTap});
  final String title;
  final String content;
  final VoidCallback onTap;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: InkWell(
        onTap: onTap,
        child: Column(
          children: [
            Text(
              content,
              style: TextStyle(
                  fontSize: 24.sp,
                  fontFamily: harmony,
                  fontWeight: FontWeight.bold,
                  color: Colors.white),
            ),
            SizedBox(
              height: 4.w,
            ),
            Text(
              title,
              style: TextStyle(
                  fontSize: 12.sp,
                  fontFamily: harmony,
                  color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}
